// src/pages/ranking/ranking.styl
.ranking-layout
  background: #f5f7fa
  min-height: 100vh

  .ranking-content
    width: 100%
    padding: 24px

    .back-home
      margin-bottom: 16px
      padding: 0
      font-size: 14px

    .full-ranking-card
      box-shadow: 0 2px 12px rgba(0,0,0,0.1)
      border-radius: 8px
      overflow: hidden

      .ant-card-head
        background: #fff
        border-bottom: 1px solid #f0f0f0
        padding: 0 24px

        .ant-card-head-title
          padding: 16px 0
          font-size: 20px
          font-weight: 500

      .ant-tabs
        .tab-title
          font-size: 16px
          padding: 0 8px

        .ant-tabs-nav
          margin: 0 24px

        .ant-list-item
          padding: 16px 24px
          transition: background 0.3s
          &.rank-top-1
            background: #fffbe6
            border-left: 4px solid #ffd700
          &.rank-top-2
            background: #f0f0f0
            border-left: 4px solid #c0c0c0
          &.rank-top-3
            background: #f8f0e6
            border-left: 4px solid #cd7f32
          &:hover
            background: #fafafa

          .ant-list-item-meta
            align-items: center

          .ant-tag
            margin-right: 0

          .rank-badge
            .ant-scroll-number
              box-shadow: none
            .gold-icon
              color: #ffd700
              font-size: 20px
            .silver-icon
              color: #c0c0c0
              font-size: 18px
            .bronze-icon
              color: #cd7f32
              font-size: 18px
            .rank-number
              color: #666
              font-weight: 500

      .ranking-footer
        padding: 16px 24px
        border-top: 1px solid #f0f0f0
        background: #fafafa
        display: flex
        gap: 12px
        .ant-tag
          margin: 0

.help-content {
  padding: 10px;
  
  h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .feature-item {
    margin-bottom: 20px;
    
    strong {
      display: block;
      margin-bottom: 8px;
    }
    
    ul {
      padding-left: 20px;
      margin-top: 8px;
      
      li {
        margin-bottom: 8px;
        line-height: 1.6;
      }
    }
  }
}

.ranking-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
  
  .ant-btn {
    margin-left: auto;
  }
}

/* 顶部返回按钮样式 */
.back-home {
  margin-bottom: 16px;
}